<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <component1></component1>
  <component2></component2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  // 局部组件 使用的三部曲 1.创建这个组件，2.注册这个组件 3.使用这个组件
  // 组件是相互独立的 不能直接跨作用域 实例也是一个组件,组件中拥有声明周期函数
  let obj = {school:'zfpx'};//如果组件共用了数据 会导致同时更新（独立性）
  // 子组件不能直接使用父组件的数据（组件之间的数据交互）
  // 组件理论上可以无限嵌套
  let component1 = {
    template:`<div @click="fn">组件1 {{school}} </div>`,
    data(){
      return obj
    },
    methods:{
      fn(){
        this.school = 'hello'
      }
    }
  };
  let component2 = {
    template:'<div>组件2 {{school}} </div>',
    data(){
      return obj
    }
  };
  let vm = new Vue({
    el:'#app',
    components:{
      component1,component2
    },
    data:{
      a:1
    }
  })
</script>
</body>
</html>
